<template>
	<cl-dialog
		title="修改预约部门"
		width="600px"
		:visible.sync="visible"
		@close="close"
		:props="{
			beforeClose: beforeClose,
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="预约部门" prop="add_dept_id">
						<cl-cascader
							style="width: 100%"
							v-model="form.add_dept_id"
							@change="changeAppointDept"
							:options="deptList"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="预约人" prop="add_user_id">
						<cl-select
							style="width: 100%"
							v-model="form.add_user_id"
							placeholder="请选择"
							filterable
						>
							<el-option
								v-for="(item, index) in appointUser"
								:key="index"
								:label="item.user_name"
								:value="item.user_id"
							/>
						</cl-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排店部门" prop="order_date_id_dept">
						<cl-cascader
							style="width: 100%"
							v-model="form.order_date_id_dept"
							@change="changeDeptAppointDept"
							:options="deptList"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排店人" prop="order_date_id_user">
						<cl-select
							style="width: 100%"
							v-model="form.order_date_id_user"
							placeholder="请选择"
							filterable
						>
							<el-option
								v-for="(item, index) in deptAppointUser"
								:key="index"
								:label="item.user_name"
								:value="item.user_id"
							/>
						</cl-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	name: "modify-dept",
	data() {
		return {
			visible: false,
			saving: false,
			deptList: [], //部门列表
			appointUser: [], //预约人列表
			deptAppointUser: [], //排点人人列表
			form: {
				biz_id: "",
				cart_id: "",
				cus_id: "",
				add_dept_id: "",
				add_user_id: "",
				order_date_id_dept: "",
				order_date_id_user: ""
			},
			rules: {
				add_dept_id: [{ required: true, message: "请选择预约部门" }],
				add_user_id: [{ required: true, message: "请选择预约人" }],
				order_date_id_dept: [{ required: true, message: "请选择排班部门" }],
				order_date_id_user: [{ required: true, message: "请选择排班人" }]
			}
		};
	},
	methods: {
		open(data = {}) {
			console.info("data", data);
			this.visible = true;

			Object.keys(this.form).forEach((key) => {
				this.form[key] = data[key] ?? "";
			});

			this.form.add_dept_id = (data.add_depts?.split(',').map(Number) ?? []).reverse();
			this.form.order_date_id_dept = (data.order_date_id_depts?.split(',').map(Number) ?? []).reverse();

			// console.log(this.form);
			const { biz_id, add_dept_id, order_date_id_dept } = this.form;

			this.getDeptList(biz_id);
			this.changeAppointDept(add_dept_id, false);
			this.changeDeptAppointDept(order_date_id_dept, false);
		},
		close() {
			this.visible = false;
		},
		beforeClose(done) {
			!this.saving && done();
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const query = {
					...this.form,
					update_type: 3
				};
				await this.$service.cart.updateCart(query).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		},
		//获取预约部门
		async getDeptList(biz_id) {
			// let biz_id = this.getCurrBiz(true);
			const data = await this.$service.dept.list({
				parent_id: 0,
				biz_id,
				is_store: 1
			});
			let deptList =
				data?.map((item) => {
					let newItem = {
						id: item.dept_id,
						value: item.dept_id,
						label: item.dept_name,
						children: []
					};
					if (item.children && item.children.length) {
						newItem.children = item.children
							.filter((subItem) => subItem.parent_id == item.dept_id)
							.map((subItem) => {
								return {
									id: subItem.dept_id,
									value: subItem.dept_id,
									label: subItem.dept_name
								};
							});
					}
					return newItem;
				}) ?? [];
			// let list = this.bizList.map((biz) => {
			// 	return {
			// 		id: biz.biz_id,
			// 		value: biz.biz_id,
			// 		label: biz.biz_name,
			// 		children: deptList
			// 			.filter((item) => biz.biz_id == item.biz_id)
			// 			.map((item) => {
			// 				let newItem = {
			// 					id: item.dept_id,
			// 					value: item.dept_id,
			// 					label: item.dept_name,
			// 					children: []
			// 				};
			// 				if (item.children && item.children.length) {
			// 					newItem.children = item.children
			// 						.filter((subItem) => subItem.parent_id == item.dept_id)
			// 						.map((subItem) => {
			// 							return {
			// 								id: subItem.dept_id,
			// 								value: subItem.dept_id,
			// 								label: subItem.dept_name
			// 							};
			// 						});
			// 				}
			// 				return newItem;
			// 			})
			// 	};
			// });
			this.deptList = deptList;
		},
		async getUserList(params) {
			const { data } = await this.$service.user.list(params).catch(() => []);
			return data || [];
		},
		async changeAppointDept(v, is_reset = true) {
			is_reset && (this.form.add_user_id = "");
			this.appointUser = [];
			this.appointUser = await this.getUserList({
				biz_id: this.form.biz_id,
				dept_id: v[1]
			});
		},
		async changeDeptAppointDept(v, is_reset = true) {
			is_reset && (this.form.order_date_id_user = "");
			this.deptAppointUser = [];
			this.deptAppointUser = await this.getUserList({
				biz_id: this.form.biz_id,
				dept_id: v[1]
			});
		}
	}
};
</script>
